<template>
	<view>
		<Navbar></Navbar>
		<view class="u-m-30">
			<view v-show="isShow">
				<view class="u-card-box u-m-b-20" v-for="(item,index) in evaluateList" :key="index">
					<view class="u-flex u-row-between">
						<view class="u-flex-1 u-flex u-row-between u-col-top">
							<u-image width="130rpx" height="130rpx"
								:src="item.user.head_img"></u-image>
							<view class="u-flex-1 u-flex u-row-between u-m-l-20">
								<view class="u-flex-col u-row-between u-height-100">
									<view class="u-font-title">{{item.user.name}}</view>
									<!-- <view class="u-flex u-ellipsis u-m-t-10 u-m-b-10" @click="checkLabel(item)">
										<view class="u-m-r-10 u-color-puce common_tag"
											v-if="!item.isLabel">选择标签</view>
										<view class="u-m-r-10 u-color-puce common_tag"
											v-for="(tagItem,tagIndex) in item.label" :key="tagIndex" v-else>
											{{tagItem.name}}
										</view>
									</view> -->
									<view class="u-font-desc u-color-puce">能量值：{{item.user.number}}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="u-p-t-20">
						<view class="u-m-b-10 u-m-l-10 u-flex u-row-between" v-for="optionItem in item.optionList"
							:key="optionItem.uuid">
							<view>{{ optionItem.name }}</view>
							<view @click="onRateChange(item.user.id)">
								<u-rate active-icon="thumb-up-fill" inactive-icon="thumb-up" active-color="#FCA40D" :count="5" size="44" v-model="optionItem.number"></u-rate>
							</view>
						</view>
						<view class="u-m-t-20">
							<u-input placeholder="请输入您的一句话评价" :custom-style="inputStyle" height="60" :clearable="false" v-model="item.evaluate_content" @blur="onInput(item.user.id)"></u-input>
						</view>
					</view>
				</view>
			</view>
			<view class="submit_box">
				<view class="submit_btn" @click="confirm">确定</view>
			</view>
		</view>
		<view style="height: 200rpx;"></view>

		<u-popup v-model="labelShow" mode="center" border-radius="20" :mask-close-able="false" width="600rpx">
			<view class="label u-p-30">
				<view class="u-font-bold u-font-28 u-m-b-30">请选择标签</view>
				<view class="u-flex u-flex-wrap">
					<view class="label_box" v-for="labelItem in labelList" :key="labelItem.id"
						@click="checkLabelTag(labelItem)">
						<view :class="labelItem.check ? 'check_label' : 'common_label'">{{ labelItem.name }}</view>
					</view>
				</view>
				<view class="u-m-t-30 u-flex u-row-between">
					<view class="cancel_btn" @click="labelShow = false">取消</view>
					<view class="confirm_btn" @click="labelConfirm">确认</view>
				</view>
			</view>
		</u-popup>

		<Modal :show="modal.show" :confirmText="modal.confirm" :cancelText="modal.cancel" :modalContent="modal.content"
			:showCancel="modal.showCancel" :maskAble="false" @confirm="modalConfirm" @cancel="modalCancel"></Modal>
	</view>
</template>

<script>
	import Navbar from '@/components/Navbar.vue'
	import Modal from '@/components/Modal.vue'
	import {
		teaScore,
		teaEvaluate,
		teaEvaluateList,
		teaLabelList,
		teaSignleEvaluate
	} from '@/network/tea.js'
	import {
		generateUUID
	} from '@/utils/index.js'
	export default {
		components: {
			Navbar,
			Modal
		},
		data() {
			return {
				teaData: {},
				labelShow: false,
				labelList: [], // 标签列表
				currentId: 0, // 当前选中对象的id
				evaluateList: [], // 评价列表
				tea_id: 0, // 酒局id
				type: 0, // 用户角色 1 青创私董  2 酒局成员
				scoreOneList: [], // 青创私董模板
				scoreTwoList: [], // 成员模板
				/* 评分 */
				inputStyle: {
					background: '#F2F5FA',
					padding: '5rpx 20rpx',
					borderRadius: '10rpx',
					fontSize: '24rpx'
				},
				modal: {
					show: false,
					confirm: '申请',
					cancel: '取消',
					showCancel: false,
					content: ''
				},
				isShow: false, // 数据处理过久导致页面未渲染
				is_task: 0 // 0 未领任务 1 已领任务
			}
		},
		onLoad(options) {
			uni.showLoading({
				title: "加载中"
			})
			let data = JSON.parse(options.data)
			this.tea_id = data.id
			this.type = data.type
			this.getEvaluateList()
			this.getTeaLabelList()
		},
		methods: {
			getTeaLabelList() {
				teaLabelList().then(res => {
					res.data.map(item => {
						item.check = false
					})
					this.labelList = res.data
				})
			},
			getEvaluateList() {
				const params = {
					tea_id: this.tea_id,
					user_id: uni.getStorageSync("user_id")
				}
				teaEvaluateList(params).then(res => {
					res.data.list.map((item, index) => {
						item.isLabel = (item.label.length > 0 ? true : false)
						teaScore({
							type: item.is_president == 1 ? 1 : 2
						}).then(teaScoreRes => {
							teaScoreRes.data.map(scoreItem => {
								scoreItem.number = 0
								scoreItem.uuid = `${generateUUID()}`
							})
							item.optionList = teaScoreRes.data
							if (item.evaluate !== null) {
								/* 已评价或评价中 */
								item.evaluate.score.map(oneItem => {
									item.optionList.map(twoItem => {
										if (oneItem.id == twoItem.id) {
											twoItem.number = oneItem.number
										}
									})
								})
							}
							if (index + 1 == res.data.list.length) {
								this.evaluateList = res.data.list
								this.$nextTick(() => {
									this.isShow = true
									uni.hideLoading()
								})
							}
						})
					})

				})
			},
			checkLabel(val) {
				this.labelList.map(item => item.check = false)
				this.labelShow = true
				this.currentId = val.user.id
			},
			checkLabelTag(val) {
				val.check = !val.check
			},
			labelConfirm() {
				let list = []
				this.labelList.map(labelItem => {
					if (labelItem.check == true) {
						list.push(labelItem)
					}
				})
				if(list.length == 0){
					uni.showToast({
						title: "请选择标签",
						icon: "none"
					})
				}else{
					this.evaluateList.map(item => {
						if (item.user.id == parseInt(this.currentId)) {
							item.label = list
							item.isLabel = true
						}
					})
					this.onEvaluate(this.currentId)
					this.labelShow = false
				}
			},
			onEvaluate(id){
				this.evaluateList.map(item=>{
					if(item.user.id == id){
						let scoreList = JSON.parse(JSON.stringify(item.optionList))
						scoreList.forEach(scoreItem=>delete scoreItem.uuid)
						let list = {
							score: scoreList
						}
						const params = {
							tea_id: this.tea_id,
							user_id: uni.getStorageSync("user_id"),
							from_user_id: item.user.id,
							label: this.onSwitch(item.label),
							content: item.evaluate_content,
							params: JSON.stringify(list)
						}
						teaSignleEvaluate(params)
					}
				})
			},
			onRateChange(id){
				this.onEvaluate(id)
			},
			onSwitch(data) {
				let list = []
				data.map(item => {
					list.push(item.id)
				})
				return list
			},
			onInput(id){
				this.onEvaluate(id)
			},
			confirm() {
				/* let list = []
				this.evaluateList.map(item => {
					item.label
					let examine = {
						from_user_id: item.user.id,
						content: item.content || '',
						score: item.optionList,
						label: item.label ? this.onSwitch(item.label).join(',') : ''
					}
					list.push(examine)
				})
				const params = {
					type: this.type == 1 ? 2 : 1,
					tea_id: this.tea_id,
					user_id: uni.getStorageSync("user_id"),
					images: '',
					params: JSON.stringify(list)
				}
				teaEvaluate(params).then(res => {
					this.modal.showCancel = false
					this.modal.content = '评价保存成功'
					this.modal.confirm = '确定'
					this.modal.show = true
				}) */
				this.modal.showCancel = false
				this.modal.content = '评价保存成功'
				this.modal.confirm = '确定'
				this.modal.show = true
			},
			modalConfirm() {
				/* if(this.is_task == 0){
					uni.navigateTo({
						url: "/teaBureau/teaMission/teaMission?id=" + this.tea_id + '&isExamine=1'
					})
				}else{
					uni.navigateBack({
						delta: 1
					})
				} */
				uni.navigateBack({
					delta: 1
				})
			},
			modalCancel() {
				this.modal.show = false
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.label {
		.label_box {
			margin-right: 20rpx;
			margin-bottom: 20rpx;

			.check_label {
				border-radius: 10rpx;
				padding: 10rpx 15rpx;
				font-size: 26rpx;
				color: #fff;
				background: #fb6316;
				border: 1rpx solid #fb6316;
				display: inline-block;
			}

			.common_label {
				border-radius: 10rpx;
				padding: 10rpx 15rpx;
				font-size: 26rpx;
				color: #fb6316;
				border: 1rpx solid #fb6316;
				background: #fff;
				display: inline-block;
			}
		}

		.cancel_btn {
			background: #868B9A;
			color: #fff;
			flex: 1;
			padding: 20rpx 0;
			text-align: center;
			border-radius: 20rpx;
		}

		.confirm_btn {
			background: #fb6316;
			color: #fff;
			flex: 1;
			padding: 20rpx 0;
			text-align: center;
			border-radius: 20rpx;
			margin-left: 20rpx;
		}
	}

	.submit_box {
		display: flex;
		justify-content: center;
		margin-top: 50rpx;

		.submit_btn {
			padding: 20rpx 0rpx;
			background: #fb6316;
			color: #fff;
			width: 500rpx;
			text-align: center;
			border-radius: 50rpx;
		}
	}
</style>